<template>
	<view class="bg-release">
		<view class="release-name">
			<uv-input placeholder="标题:请输入作品标题(15字内)" border="none" v-model="data.name" maxlength='15'></uv-input>
		</view>
		<uv-line></uv-line>
		<view class="release-type" @click='openPicker'>
			作品类型：<span style="color: #0078ff;">{{data.photographTypeName?data.photographTypeName:'请选择作品类型'}}</span>
		</view>
		<uv-picker ref="picker" :columns="types" keyName="name" @confirm="typeConfirm"></uv-picker>
		<uv-line></uv-line>

		<view class="release-description">
			<uv-textarea v-model="data.description" placeholder="和大家分享一下照片背后的故事吧(500字内)" maxlength="500" height="400rpx"
				count border="none" />
		</view>
		<uv-line></uv-line>
		<view class="release-file">
			<uv-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="15" multiple
				:previewFullImage="true"></uv-upload>
		</view>
		<view style="background-color: #eee;height: 20rpx;"></view>
		<!-- 标签 -->
		<view class="release-tag" @click="openModel">
			<p>标签：</p>
			<uv-tags v-for="item in tagPickList"  :text="item" bgColor="#eeeeee" color="#333333" borderColor="#eeeeee" ></uv-tags>
		</view>
		<uv-modal ref="modal" title="标签" @confirm="confirm" confirmText="保存">
			<view class="slot-content">
				<view class="content-title">
					<uv-input placeholder="#添加标签" border="none" v-model="tag" maxlength='15'></uv-input>
				</view>
				<uv-line></uv-line>
				<view style="padding: 20rpx;width: 100%;" v-if="tag" @click='tagChange'>#{{tag}}</view>
				<view class="content-tags">
					<uv-tags class="tags-tag" v-for="item in tagList" :text="item"
						:type="tagPickList.includes(item) ? 'primary' : 'info'"
						:plain="tagPickList.includes(item)?false:true"
						size="mini"
						@click="tagPick(item)"
						></uv-tags>
				</view>
			</view>
		</uv-modal>
		<uv-line></uv-line>
		<view class="release-button">
			<view class="button-left">
				放弃发布
			</view>
			<view class="button-right" @click='releaseChange'>
				发布
			</view>
		</view>
	</view>
	<uv-toast ref="toast"></uv-toast>
	
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from './api'
	const types = ref([])
	const modal = ref()
	const data = ref({
		name: '',
		description: '',
		tags: '',
		filesIds: '',
		photographTypeId: '',
		photographTypeName: ''
	})
	const toast = ref(null);
	const releaseChange = ()=>{
		let d = data.value
		let t = toast.value
		d.tags = ''
		d.filesIds = ''
		let showObj ={
				message: '',
				type: 'error',
				duration: 1200,
				position: 'top'
			}
		if(d.name == ''){
			showObj.message = '请输入作品名称!'
			t.show(showObj);
			return
		}
		if(d.photographTypeId == ''){
			showObj.message = '请选择作品类型!'
			t.show(showObj);
			return
		}
		if(fileList.value.length == 0){
			showObj.message = '请输入上传作品!'
			t.show(showObj);
			return
		}
		tagPickList.value.forEach(item=>{
			d.tags += item+','
		})
		fileList.value.forEach(item=>{
			d.filesIds+=item.id+','
		})
		
		console.log(data.value);
		api.releasePhotograph(d).then(res=>{
			if(res.successed){
				toast.value.show({
				message: '作品上传成功!',
				type: 'success',
				duration: 1200,
				position: 'top'
			})
			uni.navigateBack()
			}else{
				toast.value.show({
					message: '作品上传失败!',
					type: 'error',
					duration: 1200,
					position: 'top'
				})
			}
		})
	}
	
	const fileList = ref([])
	const tag = ref('')
	const tagList = ref(['标签1', '标签2'])
	const tagPickList = ref(['标签1'])
	const tagChange = () => {
		tagList.value.push(tag.value)
		tagPickList.value.push(tag.value)
		tag.value = ''
	}
	const tagPick = (item)=>{
		if(tagPickList.value.includes(item)){
			tagPickList.value = tagPickList.value.filter(x=>x != item)
		}else{
			tagPickList.value.push(item)
		}
	}
	const picker = ref()
	const openPicker = () => {
		picker.value.open()
	}
	const openModel = () => {
		modal.value.open()
	}

	const getPhotographTypes = () => {
		api.getPhotographTypes().then(res => {
			types.value = [res.datas]
			console.log(types.value);
		})
	}
	getPhotographTypes()
	const typeConfirm = (e) => {
		data.value.photographTypeId = e.value[0].id
		data.value.photographTypeName = e.value[0].name
	}
	const afterRead = async (e) => {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(e.file)
		let fileListLen = fileList.value.length
		lists.forEach((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})

		for (let i = 0; i < lists.length; i++) {
			const result = await api.upload(lists[i].url)
			let item = fileList.value[fileListLen]
			fileList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				id: result.data.id
			}))
			fileListLen++
		}
	}
	const deletePic = (e) => {
		fileList.value.splice(e.index, 1)
	}
</script>

<style lang="scss">
	.bg-release {
		height: calc(100vh - 32rpx);
		.release-button{
			position: absolute;
			bottom: 0;
			display: flex;
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			text-align: center;
			.button-left{
				width: 35%;
			}
			.button-right{
				width:65%;
				background-color: #333333;
				color: #f8c950;
			}
		}
		.slot-content {
			width: 100%;
			.content-tags {
				width: 550rpx;
				display: flex;
				justify-content: left;
				flex-wrap: wrap;
				gap:10rpx;
				margin-top: 20rpx;
				// .tags-tag{
				// 	margin-right: 10rpx;
				// }
			}
		}

		.release-type {
			color: #666;
			font-size: 30rpx;
			padding: 32rpx;
		}

		.release-name {
			padding: 24rpx;
			font-weight: bold;
			font-size: 36rpx;
		}

		.release-description {
			padding: 0 16rpx;
		}

		.release-file {
			padding: 32rpx
		}

		.release-tag {
			padding: 32rpx;
			height: 56rpx;
			line-height: 56rpx;
			display: flex;
			justify-content: left;
			flex-wrap: wrap;
			gap:10rpx;
			// .tag-tag{
			// 	margin-right: 20rpx;
			// 	font-size:24rpx;
			// 	color:#3c9cff
			// }
		}
	}
</style>